<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    .clock{
        text-align:center;
        font-size:26px;
        margin-top:100px;
    }
    </style>
</head>
<body>
     <div class="clock">
            <div id="clockDate">
                <span id="yearImg">
                 <img class="img-00"src="img/clock-00.jpg" alt="">
                 <img class="img-01"src="img/clock-00.jpg" alt="">
                 <img class="img-02"src="img/clock-00.jpg" alt="">
                 <img class="img-03"src="img/clock-00.jpg" alt="">
             </span>
             <span>年</span>
                <span id="imgmonth">
                    <img class="img-04" src="img/clock-00.jpg" alt="" />
                    <img class="img-05" src="img/clock-00.jpg" alt="" />
                </span>
             </span>
             <span>月</span>
                <span id="sunImg">
                    <img class="img-06" src="img/clock-00.jpg" alt="" />
                    <img class="img-07" src="img/clock-00.jpg" alt="" />
                </span>
            <span>日</span>
         </div>
                    <div id="clockTime">
                <img class="img-08" src="img/clock-00.jpg" alt="" />
                <img class="img-09" src="img/clock-00.jpg" alt="" />
                <span>:</span>
                <img class="img-10" src="img/clock-00.jpg" alt="" />
                <img class="img-11" src="img/clock-00.jpg" alt="" />
                <span>:</span>
                <img class="img-12" src="img/clock-00.jpg" alt="" />
                <img class="img-13" src="img/clock-00.jpg" alt=""/>
         </div>
         <span>星期</span>
            <span id="weekImg">
                <img class="img-14" src="img/clock-00.jpg" alt="" />
            </span>
     </div>


    <script>
         function showTime(){
         var time = new Date(),
           year,month,day,hour,minute,second;
           year = time.getFullYear();
           month = time.getMonth()+1;
           day= time.getDate();
           hour= time.getHours();
           minute= time.getMinutes();
           second= time.getSeconds();
           week=time.getDay();

                month = month >9?    month:'0' + month;
                day = day >9 ?       day:'0' + day;
                hour = hour >9 ?     hour:'0' + hour;
                minute = minute >9 ? minute : '0' + minute;
                second = second >9?  second:'0' + second;


           var arr = [year,month,day,hour,minute,second,week];
                console.log(arr);
                str = arr.join('');
                console.log(str);
                var strArr = str.split('');
                console.log(strArr);
                var img = document.getElementsByTagName('img');
                console.log(img);
                for(var i = 0; i < strArr.length; i++) {
                    
                    if(strArr[i] == 0) {
                        img[i].src = 'img/clock-00.jpg';
                        continue;
                    }
                    if(strArr[i] == 1) {
                        img[i].src = 'img/clock-01.jpg';
                        continue;
                    }
                    if(strArr[i] == 2) {
                        img[i].src = 'img/clock-02.jpg';
                        continue;
                    }
                    if(strArr[i] == 3) {
                        img[i].src = 'img/clock-03.jpg';
                        continue;
                    }
                    if(strArr[i] == 4) {
                        img[i].src = 'img/clock-04.jpg';
                        continue;
                    }
                    if(strArr[i] == 5) {
                        img[i].src = 'img/clock-05.jpg';
                        continue;
                    }
                    if(strArr[i] == 6) {
                        img[i].src = 'img/clock-06.jpg';
                        continue;
                    }
                    if(strArr[i] == 7) {
                        img[i].src = 'img/clock-07.jpg';
                        continue;
                    }
                    if(strArr[i] == 8) {
                        img[i].src = 'img/clock-08.jpg';
                        continue;
                    }
                    if(strArr[i] == 9) {
                        img[i].src = 'img/clock-09.jpg';
                        continue;
                    }
                }
                
            };
    
            showTime();     
          setInterval(showTime,500);
    </script>
</body>
</html>